<template>
  <div class="likes-box">
    <div class="likes-button">
      <img src="../assets/点赞.png" @click="likes" />
    </div>
    <div class="like-number">
      <p>{{ likeNum }}</p>
    </div>
  </div>
</template>

<style scoped>
.likes-box {
  width: 290px;
  height: 85px;
  background: rgba(252, 252, 252, 0.904);
  border-radius: 20px;
  text-align: left;
  color: #DF2050;
}

.likes-button {
  margin-top: 20px;
  margin-left: 20px;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 60px;
  height: 50px;
}

.likes-button:hover {
  cursor: pointer;
}

.like-number {
  display: inline-block;
  vertical-align: middle;
  width: 170px;
  height: 50px;
  text-align: center;
  padding-top: 20px;
  font-size: 20px;
  font-weight: 900;
}
</style>

<script>
export default {
  name: "Likes",
  data() {
    return {
      likeNum: 10000
    };
  },
  created:function(){
    var that=this;
    var qs=this.$qs;
    this.$http({
        url: "servlet/info",
        method: "post",
        transformRequest: [
          function(data) {//在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          funcType:2//0:grtINfo;1:changeInfo;2:showLikes;3:addLikes
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          that.likeNum=res.data.likeNum;
        },
        function(res) {
          console.log(res);
          console.log("likes-showLikes出错");
        }
      );
  },
  methods: {
    likes() {
      if (this.likeNum < 1000000) {
        this.likeNum++;
        var that=this;
    var qs=this.$qs;
    this.$http({
        url: "servlet/info",
        method: "post",
        transformRequest: [
          function(data) {//在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          funcType:3//0:grtINfo;1:changeInfo;2:showLikes;3:addLikes
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          console.log("addLikes成功");
        },
        function(res) {
          console.log(res);
          console.log("likes-addLikes出错");
        }
      );
      } else {
        alert("点赞太多啦，不用点啦");
      }
    }
  }
};
</script>